import React from 'react';
import { useNavigate } from 'react-router-dom';

function CubeMemoryPage() {
  const navigate = useNavigate();

  return (
    <div className="page-container">
      <div className="page-header">
        <button 
          onClick={() => navigate('/')}
          className="back-button"
        >
          ← 返回
        </button>
        <h1 className="page-title">🧠 魔方与记忆力</h1>
        <p className="page-description">测试魔方记忆和专注力</p>
      </div>
      
      <div className="test-content">
        <div className="test-card">
          <div className="test-card-header">测试说明</div>
          <div className="test-card-body">
            <p>这个测试将评估您的魔方记忆能力和专注力。</p>
            <ul>
              <li>🧠 魔方状态记忆</li>
              <li>⏰ 时间记忆测试</li>
              <li>🎯 序列记忆测试</li>
              <li>📊 专注力评估</li>
            </ul>
          </div>
        </div>
        
        <div className="test-actions">
          <button className="test-button primary">
            开始测试
          </button>
          <button className="test-button secondary">
            查看说明
          </button>
        </div>
      </div>
    </div>
  );
}

export default CubeMemoryPage;
